import React, { useEffect, useState } from "react";
import api from "../../../api";
import Skeleton from "../../../components/Skeleton";
import HomeHotView from "../HomeHotView";


const HomeHotList = ({ cityName }) => {



    const [hot1List, setHot1List] = useState([])
    const [hot2List, setHot2List] = useState([])

    const [hot1CityName, setHot1CityName] = useState("")
    const [hot2CityName, setHot2CityName] = useState("")

    useEffect(() => {

        const getHomeHotData = async () => {
            const res = await api.getHomeHot1({
                cityName: cityName
            })
            setHot1List(res.result)
            setHot1CityName(res.city)
        }
        setTimeout(() => {
            getHomeHotData()
        }, 1000)

    }, [])


    useEffect(() => {

        const getHomeHotData = async () => {
            const res = await api.getHomeHot2({
                cityName: cityName
            })
            setHot2List(res.result)
            setHot2CityName(res.city)
        }
        setTimeout(() => {
            getHomeHotData()
        }, 1000)
    }, [])

    return (
        <div>
            {
                hot1List.length > 0 ? <HomeHotView data={hot1List} cityName={hot1CityName} title={"热门推荐"} /> : <Skeleton />
            }
            {
                hot2List.length > 0 ? <HomeHotView data={hot2List} cityName={hot2CityName} title={"热销产品"} /> : <Skeleton />
            }
        </div>

    )
}

export default HomeHotList